<template>
  <div class="task_risk" style="height:100%;position: relative;">
    <div class="task_risk_header">
      <div class="task_risk_header_title">风险预测</div>
      <div class="task_risk_header_right">
        <div class="step_plane_time_cutover">
          <div
            class="step_plane_time"
            @click="
              fxycSelectIndex = 1;
              getFxycData(2);
            "
          >
            <img v-if="fxycSelectIndex == 1" src="../../../../src/assets/images/bi/active_circle.png" alt="" />
            <img v-if="fxycSelectIndex != 1" src="../../../../src/assets/images/bi/default_circle.png" alt="" />
            <span :class="{'on':fxycSelectIndex == 1}">未来10天: {{ fxycData.statistics.firstCnt }}项</span>
          </div>
          <div
            class="step_plane_time"
            @click="
              fxycSelectIndex = 2;
              getFxycData(3);
            "
          >
            <img v-if="fxycSelectIndex == 2" src="../../../../src/assets/images/bi/active_circle.png" alt="" />
            <img v-if="fxycSelectIndex != 2" src="../../../../src/assets/images/bi/default_circle.png" alt="" />
            <span :class="{'on':fxycSelectIndex == 2}">未来30天: {{ fxycData.statistics.secondCnt }}项</span>
          </div>
          <div
            class="step_plane_time"
            @click="
              fxycSelectIndex = 3;
              getFxycData(4);
            "
          >
            <img v-if="fxycSelectIndex == 3" src="../../../../src/assets/images/bi/active_circle.png" alt="" />
            <img v-if="fxycSelectIndex != 3" src="../../../../src/assets/images/bi/default_circle.png" alt="" />
            <span :class="{'on':fxycSelectIndex == 3}">未来90天: {{ fxycData.statistics.thirdCnt }}项</span>
          </div>
        </div>
      </div>
    </div>
    <div style="width: 100%;height:calc(100% - 40px);">
      <bar-echarts :btnhidden="btnHidden" barid="fxycId" @barclick="fxycClik" @barbtnchange="btnChange" :barx="fxycData.xData" :bary="fxycData.yData"></bar-echarts>
    </div>
  </div>
</template>

<script>
import BarEcharts from '%/modules/bi/BarEcharts';
export default {
  name: 'bi-fxyc',
  components: {
    BarEcharts
  },
  created() {
    //集团用户
    this.btnHidden = this.personType === 1 ? false : true;
    this.getFxycData(0);
  },
  mounted() {},
  data() {
    return {
      userDetail: JSON.parse(localStorage.getItem('userList')),
      personType: JSON.parse(localStorage.getItem('personType')),
      //风险预测
      fxycSelectIndex: 1,
      btnIndex: 0,
      fxycData: {
        statistics: {},
        xData: [],
        yData: {
          firstRisk: [],
          secondRisk: [],
          thirdRisk: [],
          fourthRisk: []
        }
      }
    };
  },
  methods: {
    btnChange(index, val) {
      this.btnIndex = index;
      this.fxycSelectIndex = 1;
      this.getFxycData(index, val);
    },
    // 获取风险预测
    getFxycData(index,orgId, flag, fxycDetailData) {
      index = this.btnIndex;
      // let reqData = {
      //   enterpriseId: this.userDetail.enterpriseId,
      //   source: this.personType === 1 ? 0 : 1,
      //   type: index,
      //   daysType: this.fxycSelectIndex
      // };
      let reqData = {
      	"enterpriseId": flag == "detail" ? orgId : this.userDetail.enterpriseId,
      	"source": flag == "detail" ? 1 : this.personType === 1 ? 0 : 1,
      	"type": flag == "detail" ? "" : index,
        "daysType": this.fxycSelectIndex
      }
      this.$api.bi.getFxycData(reqData).then(res => {
        // 集团用户
        if (flag == "detail") {
        	fxycDetailData.xData = [];
        	fxycDetailData.yData = {
        		firstRisk: [],
        		secondRisk: [],
        		thirdRisk: [],
        		fourthRisk: []
        	};
        } else {
        	this.fxycData.xData = [];
        	this.fxycData.yData = {
        		firstRisk: [],
        		secondRisk: [],
        		thirdRisk: [],
        		fourthRisk: []
        	};
        }

        if (res.code === 200) {
          if (flag == "detail") {
          	fxycDetailData.statistics = res.data;
             fxycDetailData.statistics.total = 0;
             fxycDetailData.statistics.firstLevel = 0;
             fxycDetailData.statistics.secondLevel = 0;
             fxycDetailData.statistics.thirdLevel = 0;
             fxycDetailData.statistics.fourthLevel = 0;
          	res.data.statisticsDetail.forEach((item) => {
          		fxycDetailData.xData.push(item.name);
          		fxycDetailData.yData.firstRisk.push(item.firstLevel);
          		fxycDetailData.yData.secondRisk.push(item.secondLevel);
          		fxycDetailData.yData.thirdRisk.push(item.thirdLevel);
          		fxycDetailData.yData.fourthRisk.push(item.fourthLevel);
              fxycDetailData.statistics.firstLevel += item.firstLevel;
              fxycDetailData.statistics.secondLevel += item.secondLevel;
              fxycDetailData.statistics.thirdLevel += item.thirdLevel;
              fxycDetailData.statistics.fourthLevel += item.fourthLevel;
          	})
            fxycDetailData.statistics.total = fxycDetailData.statistics.firstLevel
                                                  +fxycDetailData.statistics.secondLevel
                                                  +fxycDetailData.statistics.thirdLevel
                                                  +fxycDetailData.statistics.fourthLevel;

          } else {
          	this.fxycData.statistics = res.data;
          	res.data.statisticsDetail.forEach((item) => {
          		this.fxycData.xData.push(item.name);
          		this.fxycData.yData.firstRisk.push(item.firstLevel);
          		this.fxycData.yData.secondRisk.push(item.secondLevel);
          		this.fxycData.yData.thirdRisk.push(item.thirdLevel);
          		this.fxycData.yData.fourthRisk.push(item.fourthLevel);
          	})
          }



        } else {

          if (flag == "detail") {
            fxycDetailData.xData = [];
            fxycDetailData.yData = {
              firstRisk: [],
              secondRisk: [],
              thirdRisk: [],
              fourthRisk: []
            };
          } else {
          	this.fxycData.xData = [];
          	this.fxycData.yData = {
          	  firstRisk: [],
          	  secondRisk: [],
          	  thirdRisk: [],
          	  fourthRisk: []
          	};
          }
          this.$Message.error(res.message);
        }
      });
    },

    // 风险预测点击
    fxycClik(index, value) {
    	let orgId = this.fxycData.statistics.statisticsDetail[index].id;

      let jumpUrl =  this.fxycData.statistics.statisticsDetail[index].type == 1?"general-identification-ledger":"dynamic-identification-ledger";
      let dateText = "";
      if(this.fxycSelectIndex==1){
        dateText = "未来10天";
      }else if(this.fxycSelectIndex==2){
        dateText = "未来1月";
      }else if(this.fxycSelectIndex==3){
         dateText = "未来3月";
      }

    	if (this.personType == 1) {
    		this.$emit('fxycclick', orgId, value, dateText)
    	} else {

    		this.$router.push({
    			name: jumpUrl,
    			query: {
    				orgId: this.userDetail.enterpriseId,
    				projectId: orgId
    			}
    		})
    	}
    }
  }
};
</script>

<style scoped lang="scss">
.task_risk {
  height: 100%;
  position: relative;
  box-sizing: border-box;
  padding: 18px;

  .task_risk_header {
    width: 100%;
    height: 40px;

    .fxlevel {
      display: inline-block;
      width: 7px;
      height: 7px;
      margin-right: 5px;
      margin-top: 5px;

      &.first {
        background: #ed4c46;
      }

      &.second {
        background: #f49f42;
      }

      &.third {
        background: #eedd78;
      }

      &.fourth {
        background: #3090b8;
      }
    }

    .task_risk_header_title {
      float: left;
      color: #32c6c4;
    }

    .task_risk_header_right {
      float: right;
      font-size: 12px;

      .step_plane_time_cutover {
        display: flex;
        justify-content: end;
        margin-top: 10px;
        cursor: pointer;
        position: relative;
      }

      .step_plane_time {
        font-size: 12px;
        margin-left: 30px;

        img {
          vertical-align: middle;
          width: 15px;
          height: 15px;
          margin-right: 5px;
        }

        span {
          color:#fff;
          vertical-align: middle;
          &.on{
            color: #429cab;
          }
        }
      }
    }
  }

  & > div {
    display: inline-block;
    color: #fff;
    box-sizing: border-box;
  }

  .task_risk_left {
    width: 20%;
    height: 100%;
    box-sizing: border-box;
  }

  .task_risk_right {
    width: 79%;
    height: 100%;
    box-sizing: border-box;
  }
}
</style>
